<template>
  <div class='feedback'>
    <el-dialog
      title="意见反馈"
      :visible.sync="isShow"
      width="40%"
      center
      :before-close="handleClose">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="150px" label-position="top">
        <!-- <el-form-item label="建议类型" prop="type">
          <el-select v-model="ruleForm.type" placeholder="请选择您的问题或建议类型">
            <el-option label="平台优化" value="1"></el-option>
            <el-option label="服务意见" value="2"></el-option>
            <el-option label="其他" value="3"></el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item label="给我们的建议" prop="opinions">
          <el-input type="textarea" placeholder="请输入您的问题或建议，以帮助我们更好的改进平台。" :maxlength ='maxlength' :rows="3" v-model="ruleForm.opinions"></el-input>
        </el-form-item>
      </el-form>
      <el-divider></el-divider>
      <div class='tips'>
        <h3 class='tl'>注意事项</h3>
        <ul class='tips-list ml10 mt10' style='list-style: none'>
          <li>1，反馈意见被采纳后可获得<span class="font_success">100元</span>奖励。</li>
          <li>2，如反馈无聊、恶意的意见则会惩罚<span class="font_danger">500元</span>。</li>
          <li>3，反馈结果会由系统消息发送给您。</li>
        </ul>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="submit('ruleForm')">提 交</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      isShow: false,
      ruleForm: {
        type: '',
        opinions: ''
      },
      maxlength: 500,
      rules: {
        type: [
          { required: true, message: '请选择建议类型', trigger: 'change' }
        ],
        opinions: [
          {  required: true, message: '请输入建议', trigger: 'change' }
        ]
      }
    }
  },
  methods: {
    show () {
      this.isShow = true
    },
    submit (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.submitPost()
        } else {
          return false
        }
      });
    },
    submitPost () {
      let params = {
        // type: this.ruleForm.type,
        opinions: this.ruleForm.opinions,
      }
      this.$axios.post(`api/opinion_collection`, params).then(res => {
        if (res.data.code == 200) {
          this.$alert('感谢您的反馈，反馈结果会由系统消息发送您，祝您生活愉快!', '反馈成功！', {
            confirmButtonText: '确定',
            center: true,

            callback: action => {
            }
          })
          this.handleClose()
        } else if (res.data.code == 400) {
          this.$message.error(res.data.message)
        }
      }).catch(err => {

      })
    },
    handleClose () {
      this.$refs['ruleForm'].resetFields()
      this.isShow = false
    }
  }
}
</script>

<style lang='less' type='text/css'>
  .feedback {
    .el-select {
      width: 100%;
    }
    .el-dialog {
      .tips {
        .tips-list {
          ul {
            margin-top: 20px;
            li {
              list-style: none;
            }
          }
        }
      }
    }
  }
</style>
